<template>
	<view v-if="roomInfo" class="room-page-con f30">
		
		<view  v-if="roomInfo.images.length > 0" class="swiper-con">
			<swiper class="swiper"  @change="changeImg"  circular   autoplay>
				<swiper-item v-for="(item, index) in roomInfo.image_urls" :key="index">
						<van-image
						  width="100%"
						  height="453rpx"
						  fit="cover"
						    :lazy-load="true"
						  :src="item"
						/>
				</swiper-item>
			</swiper>
				
			<div class="my-swiper-current">{{current + 1}}/{{roomInfo.image_urls.length}}</div>
		</view>
		<view class="swiper-con"  v-else>
			<van-image
			  width="100%"
			  height=" 453rpx"
			  fit="cover"
			/>
		</view>	
		
		
		<view class="my-page-content">
			<view class="my-s-title">租住日期</view>
		   <view @click="goSelectDate" class="color-orange" v-if="!selectDate">选择日期 <uni-icons class="my-right-icon " color="color-orange" type="right" size="18"></uni-icons>	</view>
		    <view class="flex-between"  v-else>
		   	 <view>
		   	  {{ selectDate.startDate}}
		   	  <span class="f24 ml10">入住</span>
		   	  </view> 
		   	 <view>
		   	   {{ selectDate.endDate}}
		   		<span class="f24 ml10">离开</span>
		   	</view>
		   	 <view @click="goSelectDate" class="f24">
		   		 共 {{ selectDate.totalDays}} 晚 <uni-icons class="my-right-icon" type="right" size="12"></uni-icons>
		   	 </view>
		   </view>
			 <view class="flex-between my-s-title ">
				 <view >
					宜居人数
				 </view>
				 <view class="f30">
					{{roomInfo.people_count || '-'}}人
				 </view>
			 </view>
			 
			 <view class="my-s-title">床铺信息</view>
			  <view v-for="(item, index) in roomInfo.beds" :key="index" class="flex-between mb10">
			 	 <view>
			 		{{item.title}} {{item.sizeName}} 
			 	 </view>
			 	 <view>
			 		{{item.num}} 张
			 	 </view>
			  </view>
			  <view class="my-s-title">房间内{{item.has_bathroom == 1?'':'不'}}带卫生间</view>
			  
			  <view class="flex-between my-s-title ">
				 <view >
					押金
				 </view>
				 <view class="f30">
					{{$formatNumber(roomInfo.deposit) }}加元 （钥匙{{$formatNumber(roomInfo.deposit_key)}} +  房损{{$formatNumber(roomInfo.deposit_damage)}}）
				 </view>
			  </view>
			  <view class="grey-tips text-center">由平台监管，退房后10个工作日内自动退回原支付账户</view>
			  
			  <notice></notice>
		</view>
		
		<view class="foot-con">
			<view class="my-button-con">
				<view class="flex-between">
				      <view  class="price">{{roomInfo.price_public}} 加元/晚 </view>	
					  <view v-if="pageType ==1" :class="{'disable-btn':roomInfo.disableBtn}"  @click="nextStep" class="order">
						  {{roomInfo.disableBtn?'不可预订': '预订' }} 
					 </view>
				</view>
			</view>
			
		</view>
		<loginConfirm ref="loginRef"></loginConfirm>
	</view>
</template>


<script>
	import loginConfirm from '@/components/dialog/loginConfirm.vue'
	import notice from '@/components/notice.vue'
	export default {
		components:{
		    loginConfirm,
			notice
		},
		data() {
			return {
				roomInfo: this.$getStorage('roomInfo'),
				selectDate:  this.$getStorage('selectDate'),
				current: 0,
				pageType: 1, // 1 详情 2快照
			}
		},
		
		methods: {
			goSelectDate() {
				this.$goPage(1, '/pages/date/selectDate');
			},
			changeImg(e) {
				this.current = e.detail.current;
			},
			nextStep() {
				if(!this.selectDate || !this.selectDate.totalDays) {
					this.$toast('请选择入住日期');
					return
				}
				
				if(this.$isLogin()) {
					console.log(1111)
				  this.$goPage(1, '/subOrder/bookRoom');
				  return;
				}
				console.log(this.$refs.loginRef);
				this.$refs.loginRef.show();
				
			
			}
		},
		onLoad(option) {
			this.pageType = option.pageType || 1;
		},
		onShow() {
			this.selectDate = this.$getStorage('selectDate');
			this.roomInfo['disableBtn']  = false;
			if(this.selectDate) {
				this.roomInfo['disableBtn'] = this.roomInfo.disabled_date_range.some(i =>{
						 return i> this.selectDate.startTime &&  i < this.selectDate.endTime
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.room-page-con {
		width: 100%;
		font-size: 24rpx;
		color: #222222;
		
		::-webkit-scrollbar {
		  display:none;
		  width:0;
		  height:0;
		  color:transparent;
		}
		
		.swiper-con {
			position: relative;
			.swiper {
				height: 453rpx;
			}
			.my-swiper-current {
				  position: absolute;
				  bottom: 60rpx;
				  right: 20rpx;
				  height: 39rpx;
				  line-height: 39rpx;
				  background: rgba(0,0,0,0.6);
				  border-radius: 60rpx;
				  padding: 0 10rpx  ;
				  text-align: center;
				  font-size: 24rpx;
				  color: #FFFFFF;
				  z-index: 999;
						  
			}
		}
		.price {
			font-weight: 500;
			font-size: 36rpx;
			color: #E33838;
			height: 79rpx;
			line-height: 79rpx;
		}
		.order {
			width: 290rpx;
			height: 79rpx;
			line-height: 79rpx;
			text-align: center;
			background: #FCE353;
			font-weight: 500;
			font-size: 27rpx;
			border-radius: 60rpx;
		}
	
		
		
	}
</style>